<template>
  <div class="app-container">
    <el-card class="box-card" style="width:100%">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="queryInfo.key"
            placeholder="请输入内容"
            clearable
            @clear="getTheseInfo"
          >
            <!-- 搜索框按钮 -->
            <el-button slot="append" icon="el-icon-search" @click="getTheseInfo" />
          </el-input>
        </el-col>
      </el-row>

      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        stripe
        style="width: 100%"
        :row-style="{ height: '62px' }"
      >
        <el-table-column width="100px" align="center" label="序号" prop="id" />

        <el-table-column width="150px" align="center" label="姓名">
          <template slot-scope="scope">
            <el-tag effect="plain" type="warning">{{ scope.row.name }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="摊位名" prop="stand" />

        <el-table-column align="center" label="所在街道名" prop="street" />

        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === '玩具' || scope.row.type === '小吃'" class="well">{{ scope.row.type }}</el-tag>
            <el-tag v-else-if="scope.row.type === '数码产品' || scope.row.type === '居家用品'" class="fail">{{ scope.row.type }}</el-tag>
            <el-tag v-else class="good">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="电话" prop="tel" />

        <el-table-column
          width="250%"
          align="center"
          label="申请时间"
          prop="date"
        />

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="审核用户"
              placement="top"
            >
              <el-button
                class="detail"
                icon="el-icon-edit"
                size="mini"
                @click="showEditDialog(scope.row)"
              >去审核</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :total="total"
        :current-page="queryInfo.page"
        :page-size="10"
        layout="prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      />

    </el-card>

    <el-dialog title="详细信息" :visible.sync="editDialogVisible" width="50%">
      <span>
        <el-form
          ref="editRuleRef"
          :model="editForm"
          :rules="editRules"
          label-width="100px"
        >
          <el-form-item label="序号" prop="id">
            <el-input v-model="editForm.id" />
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="editForm.name" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard">
            <el-input v-model="editForm.idcard" />
          </el-form-item>
          <el-form-item label="摊主家住地址" prop="address">
            <el-input v-model="editForm.address" />
          </el-form-item>
          <el-form-item label="摊位名" prop="stand">
            <el-input v-model="editForm.type" />
          </el-form-item>
          <el-form-item label="摊位描述" prop="description">
            <el-input v-model="editForm.description" />
          </el-form-item>
          <el-form-item label="摊主照片" prop="uimg">
            <el-image
              style="width: 100px; height: 100px"
              :src="url1"
              :preview-src-list="srcList1"
            />
          </el-form-item>
          <el-form-item label="摊位照片" prop="img">
            <el-image
              style="width: 100px; height: 100px"
              :src="url2"
              :preview-src-list="srcList2"
            />
          </el-form-item>
          <el-form-item label="摊位所在街道名" prop="street">
            <el-input v-model="editForm.street" />
          </el-form-item>
          <el-form-item label="摊位类型" prop="type">
            <el-input v-model="editForm.type" />
          </el-form-item>
          <el-form-item label="申请时间" prop="date">
            <el-input v-model="editForm.date" />
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button class="rePassword" @click="editDialogVisible = false">取消</el-button>
        <el-button class="delete" @click="checkFail">审核不通过</el-button>

        <el-button class="detail" @click="checkSuccess">审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, fetchListItem, fetchStatus } from '@/api/review'

export default {
  name: 'InlineEditTable',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      queryInfo: {
        page: 1,
        key: null
      },
      // 总页数
      total: null,
      // 编辑可视化
      editDialogVisible: false,
      // 获取图片接口
      http: 'https://marsblue.oss-accelerate.aliyuncs.com/img/',
      url1: '',
      srcList1: [''],
      url2: '',
      srcList2: [''],
      editForm: {},
      editRules: {
        id: [{ required: true, message: '请输入序号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idcard: [
          { required: true, message: '请输入摊主身份证', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入摊位家住地址', trigger: 'blur' }
        ],
        stand: [{ required: true, message: '请输入摊位名', trigger: 'blur' }],
        street: [
          { required: true, message: '请输入摊位所在街道名', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请输入摊位类型', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入摊主电话', trigger: 'blur' }],
        date: [{ required: true, message: '请输入申请时间', trigger: 'blur' }]
      },

      roleId: '',
      // 审核通过所需要的条件
      checkForm: { id: '', status: null }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getTheseInfo() {
      this.handleCurrentChange(1)
    },
    getList() {
      this.listLoading = true
      fetchList(this.queryInfo).then((response) => {
        this.list = response.data.checklist
        this.total = response.data.allpage * 10
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 展示详细信息
    showEditDialog(role) {
      this.roleId = role.id

      this.listLoading = true
      fetchListItem(this.roleId).then((response) => {
        this.editForm = response.data
        this.url1 = this.http + this.editForm.uimg
        this.srcList1[0] = this.http + this.editForm.uimg
        this.url2 = this.http + this.editForm.img
        this.srcList2[0] = this.http + this.editForm.img
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })

      this.editDialogVisible = true
    },
    // 提交成功
    checkSuccess() {
      this.$confirm('是否通过？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.checkForm.id = parseInt(this.editForm.id)
          this.checkForm.status = '1'
          this.listLoading = true
          fetchStatus(this.checkForm).then((response) => {
            this.$message.success('用户审核通过!')
            this.getTheseInfo()
            this.editDialogVisible = false
            // Just to simulate the time of the request
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更新信息'
          })
        })
    },
    // 取消审核
    checkFail() {
      this.checkForm.id = this.editForm.id
      this.checkForm.status = '-1'
      fetchStatus(this.checkForm).then((response) => {
        this.$message.error('取消该用户审核，已删除!')
        this.getList()
        this.editDialogVisible = false
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },

    // 获取新的页数
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getList()
    }
  }
}
</script>

<style scoped>
.app-container{
}
.el-pagination{
  text-align: center;
}

.detail {
  background-color: lightseagreen;
  color: #fff;
  border-radius: 10px;
  border: none;
}
.detail:hover {
  background-color: rgb(34, 149, 194);
  color: #fff;
  border-radius: 10px;
  border: none;
}

.rePassword {
  background-color: coral;
  color: #fff;
  border-radius: 10px;
  border: none;
}
.rePassword:hover {
  background-color: rgb(245, 89, 42);
  color: #fff;
  border-radius: 10px;
  border: none;
}
.delete {
  background-color: tomato;
  color: #fff;
  border-radius: 10px;
  border: none;
}
.delete:hover {
  background-color: rgb(248, 46, 46);
  color: #fff;
  border-radius: 10px;
  border: none;
}

.good{
  background-color:rgb(239, 242, 255);
  color: rgb(78, 102, 238);
  border-color: rgb(199, 235, 238) !important;
}
.well{
  background-color:rgb(239, 255, 254);
  color: rgb(112, 216, 207);
  border-color: rgb(209, 235, 229) !important;
}
.ordinary{
  background-color:rgb(255, 247, 223);
  color: rgb(253, 173, 25);
  border-color:  rgb(231, 225, 171) !important;
}
.qualified{
  background-color:rgb(239, 247, 255);
  color: rgb(112, 111, 112);
  border-color:  rgb(235, 232, 232) !important;
}
.fail{
  background-color:rgb(255, 218, 218);
  color: rgb(255, 0, 0);
  border-color:  rgb(236, 196, 196);
}

img {
  width: 30%;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.el-table {
  margin-top: 15px;
}

.el-pagination {
  margin-top: 10px;
}

</style>

